<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { processApi } from '@/api';
import  BpmnModeler from 'bpmn-js/lib/Modeler'
const { getProcessMap,error,data } = processApi();
const bpmnContainer =  ref<HTMLElement | null>(null);
let bpmnModeler: BpmnModeler | null = null;

// 初始化 BPMN Modeler
const initBpmnModeler = () => {
  if (!bpmnModeler && bpmnContainer.value) {
    bpmnModeler = new BpmnModeler({
      container: bpmnContainer.value
    });
  }
};

// 渲染 BPMN 图
const renderBpmnDiagram = (flowData: any) => {
   initBpmnModeler();

   if (!bpmnModeler) {
    console.warn('BPMN Modeler 未初始化');
    return;
    }

  if (!flowData || !flowData.xmlData) {
    console.warn('缺少流程图数据');
    return;
  }

  // 导入 XML 数据
  bpmnModeler.importXML(flowData.xmlData).then(() => {
    // 获取画布
    const canvas: any = bpmnModeler!.get('canvas');
    // 遍历节点数据，高亮已完成的节点
    if (flowData.nodeData && Array.isArray(flowData.nodeData)) {
      flowData.nodeData.forEach((node: any) => {
        if (node.completed) {
          (canvas as any).addMarker(node.key, 'highlight-completed');
        }
      });
    }
  }).catch((err: any) => {
    console.error('导入 BPMN 失败:', err);
  });
};



onMounted(async () => {
  try {
    //初始化 BPMN Modeler
    initBpmnModeler()

    //异步获取流程图数据
    await getProcessMap();

    //检查是否返回数据
    if(data.value){
      console.log('接口返回数据:', data.value.data);
      // 渲染流程图
      renderBpmnDiagram(data.value.data);
    }else{
      // 如果接口没有返回数据，使用默认数据
      const defaultFlowData = {
        nodeData: [
          { key: 'start_event', completed: true },
          { key: 'Flow_0bbh4bn', completed: true },
          { key: 'Flow_15zl636', completed: true },
          { key: 'Activity_submit', completed: false }
        ],
        "xmlData": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:bioc=\"http://bpmn.io/schema/bpmn/biocolor/1.0\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" targetNamespace=\"http://www.flowable.org/processdef\">\n  <process id=\"flow_pests_diseases\" name=\"审核流程\">\n    <startEvent id=\"start_event\" name=\"开始\">\n      <outgoing>Flow_0bbh4bn</outgoing>\n    </startEvent>\n    <userTask id=\"Activity_approval\" name=\"审核\" flowable:assignee=\"117\" flowable:userType=\"assignee\" flowable:dataType=\"fixed\">\n      <incoming>Flow_15zl636</incoming>\n      <outgoing>Flow_0kmf5fo</outgoing>\n    </userTask>\n    <endEvent id=\"Event_1i68fw9\">\n      <incoming>Flow_0kmf5fo</incoming>\n    </endEvent>\n    <sequenceFlow id=\"Flow_0kmf5fo\" sourceRef=\"Activity_approval\" targetRef=\"Event_1i68fw9\" />\n    <userTask id=\"Activity_submit\" name=\"提交\" flowable:assignee=\"118\" flowable:userType=\"assignee\" flowable:dataType=\"fixed\">\n      <incoming>Flow_0bbh4bn</incoming>\n      <outgoing>Flow_15zl636</outgoing>\n    </userTask>\n    <sequenceFlow id=\"Flow_0bbh4bn\" sourceRef=\"start_event\" targetRef=\"Activity_submit\" />\n    <sequenceFlow id=\"Flow_15zl636\" sourceRef=\"Activity_submit\" targetRef=\"Activity_approval\" />\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_flow\">\n    <bpmndi:BPMNPlane id=\"BPMNPlane_flow\" bpmnElement=\"flow_pests_diseases\">\n      <bpmndi:BPMNShape id=\"BPMNShape_start_event\" bpmnElement=\"start_event\" bioc:stroke=\"\">\n        <omgdc:Bounds x=\"25\" y=\"155\" width=\"30\" height=\"30\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"28\" y=\"192\" width=\"22\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_1bfkgvr_di\" bpmnElement=\"Activity_approval\">\n        <omgdc:Bounds x=\"255\" y=\"240\" width=\"100\" height=\"80\" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Event_1i68fw9_di\" bpmnElement=\"Event_1i68fw9\">\n        <omgdc:Bounds x=\"502\" y=\"197\" width=\"36\" height=\"36\" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_169fhvp_di\" bpmnElement=\"Activity_submit\">\n        <omgdc:Bounds x=\"255\" y=\"80\" width=\"100\" height=\"80\" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id=\"Flow_0kmf5fo_di\" bpmnElement=\"Flow_0kmf5fo\">\n        <di:waypoint x=\"355\" y=\"280\" />\n        <di:waypoint x=\"471\" y=\"280\" />\n        <di:waypoint x=\"471\" y=\"215\" />\n        <di:waypoint x=\"502\" y=\"215\" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_0bbh4bn_di\" bpmnElement=\"Flow_0bbh4bn\">\n        <di:waypoint x=\"55\" y=\"170\" />\n        <di:waypoint x=\"155\" y=\"170\" />\n        <di:waypoint x=\"155\" y=\"120\" />\n        <di:waypoint x=\"255\" y=\"120\" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_15zl636_di\" bpmnElement=\"Flow_15zl636\">\n        <di:waypoint x=\"305\" y=\"160\" />\n        <di:waypoint x=\"305\" y=\"240\" />\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n"
      };
      renderBpmnDiagram(defaultFlowData);
    }
  } catch {
    console.error('请求失败:', error.value);
    // 出错时也使用默认数据作为后备方案
    const defaultFlowData = {
      nodeData: [
        { key: 'start_event', completed: true },
        { key: 'Flow_0bbh4bn', completed: true },
        { key: 'Flow_15zl636', completed: true },
        { key: 'Activity_submit', completed: false }
      ],
      "xmlData": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:bioc=\"http://bpmn.io/schema/bpmn/biocolor/1.0\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" targetNamespace=\"http://www.flowable.org/processdef\">\n  <process id=\"flow_pests_diseases\" name=\"审核流程\">\n    <startEvent id=\"start_event\" name=\"开始\">\n      <outgoing>Flow_0bbh4bn</outgoing>\n    </startEvent>\n    <userTask id=\"Activity_approval\" name=\"审核\" flowable:assignee=\"117\" flowable:userType=\"assignee\" flowable:dataType=\"fixed\">\n      <incoming>Flow_15zl636</incoming>\n      <outgoing>Flow_0kmf5fo</outgoing>\n    </userTask>\n    <endEvent id=\"Event_1i68fw9\">\n      <incoming>Flow_0kmf5fo</incoming>\n    </endEvent>\n    <sequenceFlow id=\"Flow_0kmf5fo\" sourceRef=\"Activity_approval\" targetRef=\"Event_1i68fw9\" />\n    <userTask id=\"Activity_submit\" name=\"提交\" flowable:assignee=\"118\" flowable:userType=\"assignee\" flowable:dataType=\"fixed\">\n      <incoming>Flow_0bbh4bn</incoming>\n      <outgoing>Flow_15zl636</outgoing>\n    </userTask>\n    <sequenceFlow id=\"Flow_0bbh4bn\" sourceRef=\"start_event\" targetRef=\"Activity_submit\" />\n    <sequenceFlow id=\"Flow_15zl636\" sourceRef=\"Activity_submit\" targetRef=\"Activity_approval\" />\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_flow\">\n    <bpmndi:BPMNPlane id=\"BPMNPlane_flow\" bpmnElement=\"flow_pests_diseases\">\n      <bpmndi:BPMNShape id=\"BPMNShape_start_event\" bpmnElement=\"start_event\" bioc:stroke=\"\">\n        <omgdc:Bounds x=\"25\" y=\"155\" width=\"30\" height=\"30\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"28\" y=\"192\" width=\"22\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_1bfkgvr_di\" bpmnElement=\"Activity_approval\">\n        <omgdc:Bounds x=\"255\" y=\"240\" width=\"100\" height=\"80\" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Event_1i68fw9_di\" bpmnElement=\"Event_1i68fw9\">\n        <omgdc:Bounds x=\"502\" y=\"197\" width=\"36\" height=\"36\" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_169fhvp_di\" bpmnElement=\"Activity_submit\">\n        <omgdc:Bounds x=\"255\" y=\"80\" width=\"100\" height=\"80\" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id=\"Flow_0kmf5fo_di\" bpmnElement=\"Flow_0kmf5fo\">\n        <di:waypoint x=\"355\" y=\"280\" />\n        <di:waypoint x=\"471\" y=\"280\" />\n        <di:waypoint x=\"471\" y=\"215\" />\n        <di:waypoint x=\"502\" y=\"215\" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_0bbh4bn_di\" bpmnElement=\"Flow_0bbh4bn\">\n        <di:waypoint x=\"55\" y=\"170\" />\n        <di:waypoint x=\"155\" y=\"170\" />\n        <di:waypoint x=\"155\" y=\"120\" />\n        <di:waypoint x=\"255\" y=\"120\" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_15zl636_di\" bpmnElement=\"Flow_15zl636\">\n        <di:waypoint x=\"305\" y=\"160\" />\n        <di:waypoint x=\"305\" y=\"240\" />\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n"
    };
    renderBpmnDiagram(defaultFlowData);
  }
});

// const flowData = {
//   nodeData: [
//     { key: 'start_event', completed: true },
//     { key: 'Flow_0bbh4bn', completed: true },
//     { key: 'Flow_15zl636', completed: true },
//     { key: 'Activity_submit', completed: false }
//   ],
//   "xmlData": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:bioc=\"http://bpmn.io/schema/bpmn/biocolor/1.0\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" targetNamespace=\"http://www.flowable.org/processdef\">\n  <process id=\"flow_pests_diseases\" name=\"审核流程\">\n    <startEvent id=\"start_event\" name=\"开始\">\n      <outgoing>Flow_0bbh4bn</outgoing>\n    </startEvent>\n    <userTask id=\"Activity_approval\" name=\"审核\" flowable:assignee=\"117\" flowable:userType=\"assignee\" flowable:dataType=\"fixed\">\n      <incoming>Flow_15zl636</incoming>\n      <outgoing>Flow_0kmf5fo</outgoing>\n    </userTask>\n    <endEvent id=\"Event_1i68fw9\">\n      <incoming>Flow_0kmf5fo</incoming>\n    </endEvent>\n    <sequenceFlow id=\"Flow_0kmf5fo\" sourceRef=\"Activity_approval\" targetRef=\"Event_1i68fw9\" />\n    <userTask id=\"Activity_submit\" name=\"提交\" flowable:assignee=\"118\" flowable:userType=\"assignee\" flowable:dataType=\"fixed\">\n      <incoming>Flow_0bbh4bn</incoming>\n      <outgoing>Flow_15zl636</outgoing>\n    </userTask>\n    <sequenceFlow id=\"Flow_0bbh4bn\" sourceRef=\"start_event\" targetRef=\"Activity_submit\" />\n    <sequenceFlow id=\"Flow_15zl636\" sourceRef=\"Activity_submit\" targetRef=\"Activity_approval\" />\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_flow\">\n    <bpmndi:BPMNPlane id=\"BPMNPlane_flow\" bpmnElement=\"flow_pests_diseases\">\n      <bpmndi:BPMNShape id=\"BPMNShape_start_event\" bpmnElement=\"start_event\" bioc:stroke=\"\">\n        <omgdc:Bounds x=\"25\" y=\"155\" width=\"30\" height=\"30\" />\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds x=\"28\" y=\"192\" width=\"22\" height=\"14\" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_1bfkgvr_di\" bpmnElement=\"Activity_approval\">\n        <omgdc:Bounds x=\"255\" y=\"240\" width=\"100\" height=\"80\" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Event_1i68fw9_di\" bpmnElement=\"Event_1i68fw9\">\n        <omgdc:Bounds x=\"502\" y=\"197\" width=\"36\" height=\"36\" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id=\"Activity_169fhvp_di\" bpmnElement=\"Activity_submit\">\n        <omgdc:Bounds x=\"255\" y=\"80\" width=\"100\" height=\"80\" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id=\"Flow_0kmf5fo_di\" bpmnElement=\"Flow_0kmf5fo\">\n        <di:waypoint x=\"355\" y=\"280\" />\n        <di:waypoint x=\"471\" y=\"280\" />\n        <di:waypoint x=\"471\" y=\"215\" />\n        <di:waypoint x=\"502\" y=\"215\" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_0bbh4bn_di\" bpmnElement=\"Flow_0bbh4bn\">\n        <di:waypoint x=\"55\" y=\"170\" />\n        <di:waypoint x=\"155\" y=\"170\" />\n        <di:waypoint x=\"155\" y=\"120\" />\n        <di:waypoint x=\"255\" y=\"120\" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id=\"Flow_15zl636_di\" bpmnElement=\"Flow_15zl636\">\n        <di:waypoint x=\"305\" y=\"160\" />\n        <di:waypoint x=\"305\" y=\"240\" />\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n"
// }

</script>

<template>
  <h1>添加流程图</h1>
  <div ref="bpmnContainer" class="bpmn-container"></div>
</template>

<style scoped>
.bpmn-container {
  height: 600px;
  border: 1px solid #ccc;
}

.highlight-completed :deep(.djs-visual > :nth-child(1)) {
  fill: green !important;
  stroke: green !important;
}

.highlight-completed :deep(.djs-visual > :nth-child(2)) {
  fill: green !important;
}
</style>
